<script setup lang="ts">
import { onMounted, ref } from 'vue'
import 'video.js/dist/video-js.css';
import videojs from 'video.js';
const value = ref(new Date())

const videoSrc = ref("")
//创建XMLHttpRequest对象
// var xhr = new XMLHttpRequest();
//     //配置请求方式、请求地址以及是否同步
//     xhr.open('POST', 'http://127.0.0.1:8000/api/test', true);
//     //设置请求结果类型为blob
//     xhr.responseType = 'blob';
//     //请求成功回调函数
//     xhr.onload = function() {
//         var blob = this.response;
//         console.log(blob)
//         //获取blob对象地址，并把值赋给容器
//         var url = URL.createObjectURL(blob);
//         videoSrc.value = url
//     }
//     xhr.send();


    function options(src:string) {
            return {
                autoplay: true, // true,浏览器准备好时开始播放。
                muted: true, // 默认情况下将会消除音频。
                loop: true, // 导致视频一结束就重新开始。
                controls: false, //取消视频中的进度条
                preload: 'auto', // auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
                language: 'zh-CN',  //汉化
                fluid: true, // 当true时，将按比例缩放以适应其容器。
                sources: [{
                    type: 'application/x-mpegURL',
                    src  //视频播放地址
                }],
                notSupportedMessage: '此视频暂无法播放，请稍后再试', // 无法播放媒体源时显示的默认信息。
                textTrackDisplay: false,
            }
        }
  let player:any;
//   const rtsp = "https://116.196.114.129:10010/sms/34020000002020000001/hls/34020000001182308300_34020000001322308301/live.m3u8"
  const rtsp = "http://106.13.115.9:8000/english.m3u8"
  onMounted(() => {
    console.log("load video")
		try {
                player = videojs("valveVideo", options(rtsp), () => {
                    player.play();
                });
            } catch (error) {
                console.log(error);
            }	
    	})  

        
</script>

<template>
     <div class="vedio">
      <video id="valveVideo" class="video-js vjs-default-skin" autoplay
             style="width: 100%;height: 100%; object-fit: fill"></video>
</div>
end
        <video controls width="250">
      <!-- <source src="./flower.webm" type="video/webm"> -->
      <!-- <source src="./flower.webm" > -->
      <source id="video_player" :src="videoSrc">
      
      Sorry, your browser doesn't support embedded videos.
    </video>
<el-calendar v-model="value" />
    <route-view></route-view>
</template>

<style scoped>

</style>
